<template>
  <div class="learnIndex">
    <div class="top">
      <p class="learn">学习视频</p>
      <div>
        <ly-tab v-model="selectedId" :items="items" :options="options" @change="handleChange"></ly-tab>
      </div>
    </div>
    <Loading v-if="notMore" class="empty-text-wrap"/>
    <div class="loadMoreWrap">
      <mu-load-more @load="load" :loading="loading">
        <div class="content1">
          <div class="box" v-for="item of listData" :key="item.id" @click="video(item)">
            <div class="img">
              <img :src="item.photo" alt />
              <span>共{{item.chapters_num}}节</span>
            </div>
            <p>{{item.title}}</p>
            <p>
              <i class="iconfont iconxuanchuan_icon_kanguo" style="color:#ccc;font-size:14px;"></i>
              <span>{{item.people_num}}人学过</span>
            </p>
          </div>
        </div>
      </mu-load-more>
    </div>
    <div class="loading" v-if="loadOver" :class="{'notPageOne':p>1||listData.length<6}">{{loaded}}</div>
  </div>
</template>

<script>
import Loading from '@/components/emptyText.vue';
import LyTab from "@cp/index";
export default {
  components: {
    LyTab,
    Loading
  },
  data() {
    return {
      // shareData: [],
      // bgColor: {
      //   swiperColor: "#fff",
      //   codeColor: "#F5F5F5"
      // },
      // shareIos: false,
      // isAndroid: false,
      // orgnation_id: "",
      // isIOS: false,

      loaded: "加載更多...",
      notMore: false,
      listData: [],
      selectedId: 0,
      loading:false,
      loadOver:false,
      class_id: "1",
      p: 1,
      type: "1",
      bottomSelectedId: 0,
      items: [],
      options: {
        activeColor: "#fff",
        color: "rgba(255,255,255,.6)"
      }
    };
  },
  mounted() {
    this.init();
    // var u = navigator.userAgent,
    //   app = navigator.appVersion;
    // var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //g
    // var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    // if (isAndroid) {
    //   //这个是安卓操作系统
    //   this.isAndroid = true;
    //   this.isIos = false;
    //   if (this.shareIos) {
    //     this.getAdShare(6);
    //   }
    // }
    // if (isIOS) {
    //   this.isAndroid = false;
    //   this.isIos = true;
    //   if (this.shareIos) {
    //     this.getAdShare(5);
    //   }
    // }
  },
  methods: {
    // getAdShare(id) {
    //   this.$http
    //     .get("app/My/add_list", {
    //       org_id: this.orgnation_id,
    //       position: id
    //     })
    //     .then(res => {
    //       if (res.code == 200) {
    //         if (res.data.length > 0) {
    //           this.shareData = res.data;
    //         } else {
    //           this.shareData = [
    //             {
    //               photo:
    //                 "https://media.71ydj.com/17cd567662bafc8d63d73d41444585d2.jpg",
    //               link: "https://apps.apple.com/cn/app/id1434639733",
    //               remarks: "中纺机党建云"
    //             }
    //           ];
    //         }
    //       }
    //     });
    // },
    video(item) {
      this.$router.push({
        path: "/learn/videoInfo",
        query: { id: item.id, type: item.type }
      });
    },
    init() {
      this.$http
        .get("/applets/CourseClass/course_class", {
          org_id:Cookies.get("user_71ydj")? JSON.parse(Cookies.get("user_71ydj")).organization_id:this.orgnation_id
        })
        .then(res => {
          res.data.video_class.forEach(el => {
            this.items.push({ label: el.class_name, id: el.id, type: el.type });
          });
          this.class_id = this.items[0].id;
          this.type = this.items[0].type;
          this.initData(this.p);
          this.$progress.done();
        });
    },

    initData(p) {
      this.$http
        .get("/applets/Study/video_list", {
          p: p,
          page: 6,
          class_id: this.class_id,
          type: this.type
        })
        .then(res => {
            if (res.data.length) {
                console.log(res.data)
                this.listData.push(...res.data);
            }
            this.loadOver = false;
            if (this.p != 1) {
                console.log(res.data);
                if (res.data.length) {
                    console.log(res.data)
                } else {
                    this.loadOver = true;
                    this.loading = false;
                    this.loaded = '没有更多数据了'
                    return false
                }
            } else {
                if (!res.data.length) {
                    this.notMore = true;
                    this.loadOver = false;
                } else {
                    if (res.data.length < 6 && res.data.length != 0) {
                        this.loadOver = true;
                        this.loaded = '没有更多数据了';
                        this.notMore =false;
                    }
                }
            }

          // if (res.data.length == 0) {
          //   this.loaded = "没有更多了";
          //   this.notMore = false;
          //   return;
          // }
          //
          // this.listData.push(...res.data);
          // if (res.data.length < 10) {
          //   this.loaded = "没有更多了";
          //   this.notMore = false;
          //   return;
          // }
        });
    },

    load() {
      //因为load 触发多次 所以做分时节流
        if (!this.loadOver) {
            this.loading = true;
            clearTimeout(this.method);
            this.method = setTimeout(() => {
                this.p = this.p + 1;
                this.initData(this.p);
                this.loading = false;
            }, 1000);
        }

      // this.loading = true;
      // if (this.notMore) {
      //   clearTimeout(this.method);
      //   this.method = setTimeout(() => {
      //     this.p = this.p + 1;
      //     this.initData(this.p);
      //   }, 500);
      // }
    },
    handleChange(item, index) {
      this.p = 1;
      this.class_id = item.id;
      this.type = item.type;
      this.listData = [];
      this.loaded = "加载更多...";
      this.notMore = false;
      this.loadOver =false;
      this.initData(this.p);
    }
  }
};
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
.top {
  background: url("~@as/img/xuexi_shipin_top@2x.png");
  background-size: 100% 100%;
  width: 100%;
  height: 229px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  .learn {
    color: #fff;
    font-weight: 500;
    font-size: 24px;
    margin-top: 73px;
    margin-left: 13px;
  }
}
.loadMoreWrap{
   margin-top: -50px;
  .content1 {
    width: 91%;
    margin-left: 17px;
    margin-right: 17px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}


.box {
  width: 164px;
  border-radius: 0 4px 4px 0;
  margin-bottom: 14px;

  .img {
    position: relative;
    width: 164px;
    height: 123px;
    background: #eee;
    border-radius: 4px;
    img {
      border-radius: 4px;
      width: 164px;
      height: 123px;
    }
    span {
      color: #fff;
      font-size: 12px;
      position: absolute;
      bottom: 6px;
      right: 8px;
    }
  }
  p {
    font-size: 14px;
    color: #333;
    margin-top: 12px;
    overflow: hidden;
    /*文本不会换行*/
    white-space: nowrap;
    /*当文本溢出包含元素时，以省略号表示超出的文本*/
    text-overflow: ellipsis;
  }
  p + p {
    margin-top: 5px !important;
    font-size: 12px;
    color: #999;

    display: flex;
    align-items: center;
    span {
      margin-left: 3px;
    }
  }
}

.loading {
  width: 100%;
  font-size: 14px;
  color: #dddddd;
  display: flex;
  align-items: center;
  justify-content: center;
  &.notPageOne {
    margin-top: -40px;
  }
}
.empty-text-wrap {
  width: 100%;
  height: 40vh;
  margin-top: 10vh;
}

.mu-load-more /deep/ .mu-circle-spinner{
  border-color: #e5e5e5;
}
.learnIndex /deep/.mu-elevation-1{
  box-shadow: 0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
  -webkit-box-shadow:0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
}
</style>